// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.comment-vote {
  @_top: comment-vote;
  @_bg: @green-light;

  .reset-input();
  border-radius: 100000px;
  border: 2px solid transparent;
  font-size: @font-size--normal;
  padding: 2px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: @osu-colour-b6;
  position: relative;

  &:not([disabled]):hover {
    border-color: @_bg;
  }

  &--disabled {
    background-color: transparent;
  }

  &--inline {
    display: inline-flex;
    padding: 0 8px;
    font-size: inherit;
  }

  &--on {
    .default-text-shadow();
    color: #fff;
    background-color: @_bg;
  }

  &--on:not([disabled]):hover {
    background-color: fade(@_bg, 50%);
  }

  &__hover {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 2px;
    width: 100%;
    padding-right: 5px;
    display: flex;
    justify-content: center;
    color: @green;
    text-shadow: none;
    font-size: @font-size--title-small;
    opacity: 0;
    will-change: opacity;

    .@{_top}:not([disabled]):hover & {
      opacity: 1;
    }
  }

  &__spinner {
    .full-size();
    .center-content();
  }

  &__text {
    .@{_top}--posting & {
      opacity: 0;
    }
  }
}
